<template>
    <el-card shadow="never" class="page_card" style="height: 100%;">
        <el-row class="border-bottom pb-3 hasBack">
            <i class="el-icon-edit icobutton"></i>
            <i class="el-icon-share icobutton"></i>
            <i class="el-icon-delete icobutton"></i>
            <i class="el-icon-star-off icobutton"></i>
        </el-row>
        <!-- hide the last -->
        <div class="hasBack" >
            <div class="mb-2 p-1 backItem" v-for="(item,index) in orders.lineItems" v-if="index < openNumber" style="border-bottom: 1px solid #409eff;padding-bottom: 9px;">
                <span>{{item.title}}</span>
                <div>
                    <span class="mr10">{{item.sku}}</span>
                    <el-input-number class="mr10" size="mini" :label="item.quantity" :value="item.quantity"></el-input-number>
                    <el-select placeholder="选择器" style="width: 100px;" size="mini" class="mr10">
                        <el-option>待审</el-option>
                        <el-option>待发</el-option>
                        <el-option>已发</el-option>
                        <el-option>欠单</el-option>
                        <el-option>取消</el-option>
                        <el-option>坏单</el-option>
                        <el-option>退单-待入库</el-option>
                        <el-option>退单-次品返修</el-option>
                        <el-option>退单-已入库</el-option>
                        <el-option>退单-已关闭</el-option>
                    </el-select>
                    <span class="pointer" style="background: #409eff;color: white;float: right;padding: 0px 5px;" @click="toggle" v-if="index==0 && !isOpen">+</span>
                    <span class="pointer" style="background: #409eff;color: white;float: right;padding: 0px 5px;" @click="toggle" v-if="index==0 && isOpen">-</span>
                </div>
            </div>
        </div>

       


        <!-- <div class="hasBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.lineItems">
                <span class="mr10">{{item.sku}}</span>
                <el-input-number size="mini" :label="item.quantity" :value="item.quantity"></el-input-number>
                <el-select placeholder="选择器" style="width: 100px;" size="mini" class="mr10">
                    <el-option>待审</el-option>
                    <el-option>待发</el-option>
                    <el-option>已发</el-option>
                    <el-option>欠单</el-option>
                    <el-option>取消</el-option>
                    <el-option>坏单</el-option>
                    <el-option>退单-待入库</el-option>
                    <el-option>退单-次品返修</el-option>
                    <el-option>退单-已入库</el-option>
                    <el-option>退单-已关闭</el-option>
                </el-select>
            </p>
        </div> -->

        <div class="noBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem">SaleDate:{{orders.creationDate}}</p>
        </div>

        <div class="hasBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.email}}</p>
        </div>

        <div class="noBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem">{{orders.buyerUsername}}</p>
        </div>

        <div class="hasBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.fullName}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.addressLine1}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.addressLine2}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.city}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.postalCode}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.stateOrProvince}},</p>
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shipTo.contactAddress.countryCode}},</p>
        </div>

        <div class="noBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.fulfillmentStartInstructions">{{item.shippingStep.shippingServiceCode}}</p>
        </div>

        <!-- 
        <el-form :inline="true" size="mini" style="width: 100%;display: inline-block;" class="hasBack" v-for="item in orders.lineItems" :key="item.id">
            <el-form-item lass="mr-2 float-left">
                <el-input-number size="mini" :label="item.quantity" :value="item.quantity"></el-input-number>
            </el-form-item>
           <el-form-item label="" class="mr-2 float-left">
                <el-select placeholder="选择器" style="width: 100px;">
                    <el-option>待审</el-option>
                    <el-option>待发</el-option>
                    <el-option>已发</el-option>
                    <el-option>欠单</el-option>
                    <el-option>取消</el-option>
                    <el-option>坏单</el-option>
                    <el-option>退单-待入库</el-option>
                    <el-option>退单-次品返修</el-option>
                    <el-option>退单-已入库</el-option>
                    <el-option>退单-已关闭</el-option>
                </el-select>
            </el-form-item> 
        </el-form> -->

        <el-form :inline="true" size="mini" class="noBack">
            <el-form-item>
                <el-input placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>

        <el-form :inline="true" size="mini" class="hasBack">
            <el-form-item class="mr-2 float-left">
                <el-select placeholder="选择器" style="width: 100px;">
                    <el-option>---CANCEL---</el-option>
                    <el-option>CANCEL-BUYER</el-option>
                    <el-option>CANCEL-NOSTOCK</el-option>
                    <el-option>CANCEL-ADDRESS</el-option>
                    <el-option>CANCEL-REFUND</el-option>
                    <el-option>CANCEL-RESEND</el-option>
                    <el-option>---CHANGEMIND---</el-option>
                    <el-option>CHANGEMIND-NOCASE</el-option>
                    <el-option>CHANGEMIND-REFUND</el-option>
                    <el-option>CHANGEMIND-RETURN-WAIT</el-option>
                    <el-option>CHANGEMIND-RETURN-RESEND</el-option>
                    <el-option>CHANGEMIND-RETURN-REFUND</el-option>
                    <el-option>---NORECEIVE---</el-option>
                    <el-option>NORECEIVE-NOCASE</el-option>
                    <el-option>NORECEIVE-CASEOPEN</el-option>
                    <el-option>NORECEIVE-REFUND</el-option>
                    <el-option>NORECEIVE-REFUND-PART</el-option>
                    <el-option>NORECEIVE-RESEND</el-option>
                    <el-option>---WRONG---</el-option>
                    <el-option>WRONG-NOCASE</el-option>
                    <el-option>WRONG-CASEOPEN</el-option>
                    <el-option>WRONG-REFUND</el-option>
                    <el-option>WRONG-REFUND-PART</el-option>
                    <el-option>WRONG-RESEND</el-option>
                    <el-option>WRONG-RESEND-PART</el-option>
                    <el-option>WRONG-RETURN-ACCEPT</el-option>
                    <el-option>WRONG-RETURN-WAIT</el-option>
                    <el-option>WRONG-RETURN-REFUND</el-option>
                    <el-option>WRONG-RETURN-RESEND</el-option>
                    <el-option>---DEFECT---</el-option>
                    <el-option>DEFECT-NOCASE</el-option>
                    <el-option>DEFECT-CASEOPEN</el-option>
                    <el-option>DEFECT-REFUND</el-option>
                    <el-option>DEFECT-REFUND-PART</el-option>
                    <el-option>DEFECT-RESEND</el-option>
                    <el-option>DEFECT-RESEND-PART</el-option>
                    <el-option>DEFECT-RETURN-ACCEPT</el-option>
                    <el-option>DEFECT-RETURN-WAIT</el-option>
                    <el-option>DEFECT-RETURN-REFUND</el-option>
                    <el-option>DEFECT-RETURN-RESEND</el-option>
                    <el-option>---ROYALMAIL---</el-option>
                    <el-option>BACK BY ROYALMAIL</el-option>
                    <el-option>BACK BY ROYALMAIL-RESEND</el-option>
                    <el-option>BACK BY ROYALMAIL-REFUND</el-option>
                    <el-option>ROYAL MAIL DELAY REFUND</el-option>
                    <el-option>ROYAL MAIL DELAY RESEND</el-option>
                    <el-option>---NEGATIVE---</el-option>
                    <el-option>NEGATIVE-WRONG</el-option>
                    <el-option>NEGATIVE-DEFECT</el-option>
                    <el-option>NEGATIVE-NONRECEIVE</el-option>
                    <el-option>---OTHER---</el-option>
                    <el-option>CHARGEBACK-REFUND</el-option>
                    <el-option>COLLECTION</el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <div class="noBack">
            <p class="mb-2 p-1 rounded-sm bg-light backItem" v-for="item in orders.payments">PPID:{{item.paymentReferenceId}}</p>
        </div>

    </el-card>
</template>
<script>
    export default {
        name: "crm-rightSide",
        data() {
            return {
                isOpen: false,
                openNumber: 1,
                orders: {}
            }
        },
        mounted() {
            this.$api.queryOrder().then(res => {
                console.log(res['data:'])
                this.orders = res['data:'][0]
            })
        },
        methods: {
            toggle() {
                this.isOpen = !this.isOpen
                this.openNumber == 1 ? this.openNumber = this.orders.lineItems.length : this.openNumber = 1
            }
        },
    }
</script>

<style>
    .hasBack {
        background: #f2f5ff;
        margin: 0px -20px;
        padding: 5px 15px;
        border-radius: 1px;
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
    }

    .noBack {
        background: white;
        margin: 0px -20px;
        padding: 5px 15px;
        border-radius: 1px;
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
    }

    .backItem {
        font-size: 13px;
        margin: 5px 0;
    }

    .icobutton {
        margin-right: 2px;
        color: #457dff;
        cursor: pointer;
    }
</style>